<template>
	<view class="flex py-2 px-1 border-bottom ">
		<view class="mr-1 flex align-center justify-between">
			<radio v-if="showRadio" :checked="item.goods_state" color="#c00000" @click="radioClickHandler"></radio>
			<image @click="detailClickHandler" :src="item.goods_small_logo||defaultPic"
				style="height: 100px;width: 100px;display: block;">
			</image>
		</view>
		<view class="flex fle-1 flex-column justify-between">
			<view style="font-size: 13px;" @click="detailClickHandler">{{item.goods_name}}</view>
			<view class="flex justify-between align-center">
				<view style="font-size: 16px;color: #c00000;">￥{{toFixed(item.goods_price)}}</view>
				<uni-number-box v-if="showNum" :min='1' :value="item.goods_count"
					@change="numberChangeHandler"></uni-number-box>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';



	const emit = defineEmits(['radio_change', 'num_change', 'detail'])

	const props = defineProps({
		item: {
			type: Object,
			default: {}
		},
		showRadio: {
			type: Boolean,
			default: false
		},
		showNum: {
			type: Boolean,
			default: false
		}
	})

	const detailClickHandler = () => {
		emit('detail', props.item.goods_id)
	}

	const radioClickHandler = () => {
		emit('radio_change', {
			goods_id: props.item.goods_id,
			goods_state: !props.item.goods_state
		})
	}

	const toFixed = (goods_price) => {
		return Number(goods_price).toFixed(2)
	}

	const numberChangeHandler = (value) => {

		emit('num_change', {
			goods_id: props.item.goods_id,
			goods_count: value
		})
	}

	const defaultPic = ref(
		"https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default -medium.png"
	)
</script>

<style>

</style>